<script setup lang="ts">
import { Marquee } from "@selemondev/vue3-marquee";
import "@selemondev/vue3-marquee/dist/style.css";


interface sponsorsProps {
  icon: string;
  name: string;
}

const sponsors: sponsorsProps[] = [
  {
    icon: "icon-[logos--vue]",
    name: "",
  },
  {
    icon: "icon-[fluent--code-ts-rectangle-16-filled]",
    name: "",
  },

  {
    icon: "icon-[logos--nuxt-icon]",
    name: "",
  },
  {
    icon: "icon-[bi--github]",
    name: "",
  },
  {
    icon: "icon-[logos--element]",
    name: "",
  },
  {
    icon: "icon-[logos--unocss]",
    name: "",
  },
  {
    icon: "icon-[logos--nodejs]",
    name: "",
  },
  {
    icon: "icon-[simple-icons--drizzle]",
    name: "",
  },
  {
    icon: "icon-[logos--vitejs]",
    name: "",
  },
  {
    icon: "icon-[simple-icons--1panel]",
    name: "",
  },
  {
    icon: "icon-[skill-icons--docker]",
    name: "",
  },
];

</script>

<template>
  <section
    id="sponsors"
    class="max-w-[75%] mx-auto pb-24 sm:pb-32"
  >
    <h2 class="text-lg md:text-xl text-center mb-6"></h2>

    <div class="mx-auto">
      <Marquee
        class="gap-[3rem]"
        :pauseOnHover="true"
        :fade="true"
        innerClassName="gap-[3rem]"
      >
        <div
          v-for="{ icon, name } in sponsors"
          :key="name"
        >
          <div class="flex items-center text-xl md:text-2xl font-medium">
            <span :class="icon"></span>
            {{ name }}
          </div>
        </div>
      </Marquee>
    </div>
  </section>
</template>
